<script setup>
    // vue的声明周期函数：创建阶段、挂载阶段、更新阶段、卸载阶段
    import {
        ref,
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted
    } from 'vue'

    // 生命周期 钩子
    onBeforeMount(()=>{
        console.log("挂载之前")
    })
    onMounted(()=>{
        console.log("挂载完毕")
    })
    onBeforeUpdate(()=>{
        console.log("更新之前")
    })
    onUpdated(()=>{
        console.log("更新完毕")
    })
    onBeforeUnmount(()=>{
        console.log("卸载之前")
    })
    onUnmounted(()=>{
        console.log("卸载完毕")
    })


    let count = ref(0)

    function updateCount(){
        count.value += 1
        console.log(count.value)
    }


</script>

<template>

    <div>
        <h1>count的值为：{{ count }}</h1>
        <button @click="updateCount"> 更新 count </button>
    </div>

</template>

<style scoped>
    
</style>